<template>
  <div class="code-rain-container">
    <canvas ref="canvas"></canvas>
    <div id="welcome">欢迎来到这里</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const canvas = ref(null);
const fontSize = 20; // 增大字体大小
const columnSpacing = 1.5; // 列间距倍数
const drops = ref([]);
let intervalId = null;

const initCanvas = () => {
  canvas.value.width = window.innerWidth;
  canvas.value.height = window.innerHeight;

  // 计算列数时考虑列间距
  const columns = Math.floor(canvas.value.width / (fontSize * columnSpacing));
  drops.value = Array(columns).fill(0);

  initialDraw();
};

const initialDraw = () => {
  const ctx = canvas.value.getContext("2d");

  ctx.fillStyle = "rgba(0, 0, 0, 1)";
  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
  ctx.font = `${fontSize}px '宋体', 'Noto Sans CJK SC', monospace`;

  for (let i = 0; i < drops.value.length; i++) {
    for (let j = 0; j < Math.floor(canvas.value.height / fontSize); j++) {
      const text = getRandomChar();
      const x = i * fontSize * columnSpacing; // 应用列间距
      const y = j * fontSize;
      const brightness = getRandomBrightness(90, 175);
      ctx.fillStyle = `rgb(0, ${brightness}, 0)`;
      ctx.fillText(text, x, y);
    }
  }
};

const draw = () => {
  const ctx = canvas.value.getContext("2d");
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; // 调整拖尾透明度
  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
  ctx.font = `${fontSize}px '宋体', monospace`;

  for (let i = 0; i < drops.value.length; i++) {
    const text = getRandomChar();
    const x = i * fontSize * columnSpacing; // 应用列间距
    const y = drops.value[i] * fontSize;
    const brightness = getRandomBrightness(100, 155);
    ctx.fillStyle = `rgb(0, ${brightness}, 0)`;
    ctx.fillText(text, x, y);

    // 调整下落逻辑
    if (y > canvas.value.height && Math.random() > 0.92) {
      drops.value[i] = 0;
    } else {
      drops.value[i]++;
    }
  }
};

// 辅助函数：获取随机字符
const getRandomChar = () => {
  // 扩展字符集，包括一些日文字符和符号
  const chars =
    "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
  return Math.random() > 0.7
    ? String.fromCharCode(Math.floor(Math.random() * 94) + 33)
    : chars[Math.floor(Math.random() * chars.length)];
};

// 辅助函数：获取随机亮度
const getRandomBrightness = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};

const handleResize = () => {
  canvas.value.width = window.innerWidth;
  canvas.value.height = window.innerHeight;
  const newColumns = Math.floor(
    canvas.value.width / (fontSize * columnSpacing)
  );
  while (drops.value.length < newColumns) drops.value.push(0);
  while (drops.value.length > newColumns) drops.value.pop();
  initialDraw();
};

const startAnimation = () => {
  setTimeout(() => {
    intervalId = setInterval(draw, 60); // 调整动画速度
    document.getElementById("welcome").style.opacity = 1;
  }, 1000);
};

onMounted(() => {
  initCanvas();
  startAnimation();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId);
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped>
.code-rain-container {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: black;
  color: #0f0;
  font-family: monospace;
}

canvas {
  display: block;
}

#welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0f0;
  font-size: clamp(2rem, 5vw, 3.5rem); /* 响应式字体大小 */
  font-family: "宋体", monospace;
  text-shadow: 0 0 5px #0f0, 0 0 15px #0f0;
  opacity: 0;
  transition: opacity 1.5s ease-out;
  text-align: center;
  white-space: nowrap;
}
</style>
